<template>
	<view class="animated fadeIn faster">
		<view class="status-bar-height bg-bar"></view>
		<view class="p-3 bg-bar">
			<view class="d-flex d-flex-center d-flex-middle mb-3">
				<text class="font32 font-bold">通讯录</text>
			</view>
			<view class="search-box d-flex d-flex-center d-flex-middle">
				<text class="iconfont icon-chazhao font-bold font30 mr-1" style="color:#949494"></text>
				<text style="color: #cdcdcd;">搜索</text>
			</view>
		</view>
		<unicloud-db ref="udb" @load="handleLoad" v-slot:default="{ data, loading, pagination, error, options }"
			collection="uni-id-users" field="id,_id,nickname,avatar_file" :where="udbWhere">
			<view class="d-flex" v-for="item in data" :key="item._id" @click="toChat(item.id)">
				<view class="avatar">
					<image class="rounded15" :src="item.avatar_file?.url || '/uni_modules/uni-im/static/avatarUrl.png'" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
				</view>
				
				<view class="callinfo d-flex-item d-flex d-flex-middle">
					<text class="font32">{{item.nickname}}</text>
			
				</view>
			</view>
			<!-- <view v-if="error" class="error">
				<text>{{ error.message }}</text>
			</view>
			<uni-list v-else :border="false">
				<uni-im-info-card v-for="(item, index) in data" :key="item._id" link
					:title="item.nickname"
					:avatarUrl="item.avatar_file?.url || '/uni_modules/uni-im/static/avatarUrl.png'"
					@click="toChat(item._id)"></uni-im-info-card>
					
			</uni-list> -->
			
			<!-- <uni-im-load-state :status="loading ? 'loading' : loadMoreStatus"></uni-im-load-state> -->
		</unicloud-db>
		
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				loadMoreStatus: 'more',
				udbWhere: '', //'_id != $cloudEnv_uid',
				conversation:[
					{
						id:'1',
						avatar:'https://www.168802.xyz/avatar/avatar01.png',
						nickname:'佩奇',
						lastmsg:'感觉灯光还不错',
						msgnum:9,
						datetime:'3小时前'
					},{
						id:'2',
						avatar:'https://www.168802.xyz/avatar/avatar02.png',
						nickname:'马里奥',
						lastmsg:'晚上去鬼屋探探险啊！',
						msgnum:6,
						datetime:'6小时前'
					},{
						id:'3',
						avatar:'https://www.168802.xyz/avatar/avatar03.png',
						nickname:'Pinko.Zhang',
						lastmsg:'下班准备去哪里吃饭，约起？',
						msgnum:0,
						datetime:'6小时前'
					},{
						id:'4',
						avatar:'https://www.168802.xyz/avatar/avatar04.png',
						nickname:'潘艺竹',
						lastmsg:'晚上去鬼屋探探险啊！',
						msgnum:0,
						datetime:'6小时前'
					},{
						id:'5',
						avatar:'https://www.168802.xyz/avatar/avatar05.png',
						nickname:'庄思丸',
						lastmsg:'好的',
						msgnum:0,
						datetime:'6小时前'
					}
				]
			}
		},
		onReachBottom() {
			this.$refs.udb.loadMore();
		},
		onReady() {

		},
		methods: {
			handleLoad(data, ended) {
				this.loadMoreStatus = ended ? 'noMore' :
				'more'; // oading 的状态，可选值：more（loading前）、loading（loading中）、noMore（没有更多了）
			},
			toChat(cid){
				uni.navigateTo({
				  url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + cid,
				  animationDuration: 300
				})
			},
		}
	}
</script>

<style scoped>
	.search-box{
		height: 80rpx;
		border-radius: 14rpx;
		background-color: #ffffff;
	}
	.avatar{
		padding-top: 22rpx;
		padding-bottom: 22rpx;
		padding-left: 30rpx;
		padding-right: 25rpx;
		
	}
	.add-num{
		height: 36rpx;
		min-width: 36rpx;
		border-radius: 36rpx;
		background-color: #ff5722
	}
	.callinfo{
		height: 144rpx;
		padding-right: 30rpx;
		border-bottom: solid 1px #ececec;
	}
</style>